@import './colors';
@import './mixins/mixins';
@import './buttons';

.theme-indigo {
  .side {
    background-color: $theme-indigo;
  }

  .toolbar-button {
    @include button(48px, 48px, 18px, $theme-indigo-background, $white);
    cursor: pointer;

    &:hover {
      color: $white;
    }
  }

  .task-marked {
    border-left-color: $theme-indigo;

    .task-title {
      color: $theme-indigo;
    }

    &:hover {
      border-color: $theme-indigo;
    }

    .icon-bookmark {
      color: $theme-indigo;
    }
  }

  .task-title-text {
    color: $theme-indigo;
  }

  .confirm-hd {
    @include gradient($theme-indigo, $theme-blue);
  }

  .confirm-enter {
    background-color: $theme-indigo;
    color: $white;

    &:hover {
      @include gradient($theme-indigo, $theme-blue);
      color: $white;
    }
  }
}

.theme-purple {
  .side {
    background-color: $theme-purple;
  }

  .toolbar-button {
    @include button(48px, 48px, 18px, $theme-purple-background, $white);
    cursor: pointer;

    &:hover {
      color: $white;
    }
  }

  .task {
    &:hover {
      border-color: $theme-purple;
    }
  }

  .task-marked {
    border-left-color: $theme-purple;

    .task-title {
      color: $theme-purple;
    }

    &:hover {
      border-color: $theme-purple;
    }

    .icon-bookmark {
      color: $theme-purple;
    }
  }

  .task-title-text {
    color: $theme-purple;
  }

  .confirm-hd {
    @include gradient($theme-purple, $theme-dark-purple);
  }

  .confirm-enter {
    background-color: $theme-purple;
    color: $white;

    &:hover {
      @include gradient($theme-purple, $theme-dark-purple);
      color: $white;
    }
  }
}

.theme-red {
  .side {
    background-color: $theme-red;
  }

  .toolbar-button {
    @include button(48px, 48px, 18px, $theme-red-background, $white);
    cursor: pointer;

    &:hover {
      color: $white;
    }
  }

  .task {
    &:hover {
      border-color: $theme-red;
    }
  }

  .task-marked {
    border-left-color: $theme-red;

    .task-title {
      color: $theme-red;
    }

    &:hover {
      border-color: $theme-red;
    }

    .icon-bookmark {
      color: $theme-red;
    }
  }

  .task-title-text {
    color: $theme-red;
  }

  .confirm-hd {
    @include gradient($theme-red, $theme-pink);
  }

  .confirm-enter {
    background-color: $theme-red;
    color: $white;

    &:hover {
      @include gradient($theme-red, $theme-pink);
      color: $white;
    }
  }
}

.theme-green {
  .side {
    background-color: $theme-green;
  }

  .toolbar-button {
    @include button(48px, 48px, 18px, $theme-green-background, $white);
    cursor: pointer;

    &:hover {
      color: $white;
    }
  }

  .task {
    &:hover {
      border-color: $theme-green;
    }
  }

  .task-marked {
    border-left-color: $theme-green;

    .task-title {
      color: $theme-green;
    }

    &:hover {
      border-color: $theme-green;
    }

    .icon-bookmark {
      color: $theme-green;
    }
  }

  .task-title-text {
    color: $theme-green;
  }

  .confirm-hd {
    @include gradient($theme-green, $theme-teal);
  }

  .confirm-enter {
    background-color: $theme-green;
    color: $white;

    &:hover {
      @include gradient($theme-green, $theme-teal);
      color: $white;
    }
  }
}

.theme-dark-purple {
  .side {
    background-color: $theme-dark-purple;
  }

  .toolbar-button {
    @include button(48px, 48px, 18px, $theme-dark-purple-background, $white);
    cursor: pointer;

    &:hover {
      color: $white;
    }
  }

  .task-marked {
    border-left-color: $theme-dark-purple;

    .task-title {
      color: $theme-dark-purple;
    }

    &:hover {
      border-color: $theme-dark-purple;
    }

    .icon-bookmark {
      color: $theme-dark-purple;
    }
  }

  .task-title-text {
    color: $theme-dark-purple;
  }

  .confirm-hd {
    @include gradient($theme-dark-purple, $theme-purple);
  }

  .confirm-enter {
    background-color: $theme-dark-purple;
    color: $white;

    &:hover {
      @include gradient($theme-dark-purple, $theme-purple);
      color: $white;
    }
  }
}

.theme-blue {
  .side {
    background-color: $theme-blue;
  }

  .toolbar-button {
    @include button(48px, 48px, 18px, $theme-blue-background, $white);
    cursor: pointer;

    &:hover {
      color: $white;
    }
  }

  .task-marked {
    border-left-color: $theme-blue;

    .task-title {
      color: $theme-blue;
    }

    &:hover {
      border-color: $theme-blue;
    }

    .icon-bookmark {
      color: $theme-blue;
    }
  }

  .task-title-text {
    color: $theme-blue;
  }

  .confirm-hd {
    @include gradient($theme-blue, $theme-indigo);
  }

  .confirm-enter {
    background-color: $theme-blue;
    color: $white;

    &:hover {
      @include gradient($theme-blue, $theme-indigo);
      color: $white;
    }
  }
}

.theme-pink {
  .side {
    background-color: $theme-pink;
  }

  .toolbar-button {
    @include button(48px, 48px, 18px, $theme-pink-background, $white);
    cursor: pointer;

    &:hover {
      color: $white;
    }
  }

  .task-marked {
    border-left-color: $theme-pink;

    .task-title {
      color: $theme-pink;
    }

    &:hover {
      border-color: $theme-pink;
    }

    .icon-bookmark {
      color: $theme-pink;
    }
  }

  .task-title-text {
    color: $theme-pink;
  }

  .confirm-hd {
    @include gradient($theme-pink, $theme-red);
  }

  .confirm-enter {
    background-color: $theme-pink;
    color: $white;

    &:hover {
      @include gradient($theme-pink, $theme-red);
      color: $white;
    }
  }
}

.theme-teal {
  .side {
    background-color: $theme-teal;
  }

  .toolbar-button {
    @include button(48px, 48px, 18px, $theme-teal-background, $white);
    cursor: pointer;

    &:hover {
      color: $white;
    }
  }

  .task-marked {
    border-left-color: $theme-teal;

    .task-title {
      color: $theme-teal;
    }

    &:hover {
      border-color: $theme-teal;
    }

    .icon-bookmark {
      color: $theme-teal;
    }
  }

  .task-title-text {
    color: $theme-teal;
  }

  .confirm-hd {
    @include gradient($theme-teal, $theme-green);
  }

  .confirm-enter {
    background-color: $theme-teal;
    color: $white;

    &:hover {
      @include gradient($theme-teal, $theme-green);
      color: $white;
    }
  }
}

.theme-indigo,
.theme-green,
.theme-purple,
.theme-red,
.theme-blue,
.theme-pink,
.theme-dark-purple,
.theme-teal {
  .logo {
    @include button(48px, 48px, 24px, $white, $white);
    color: $white;
  }

  .toolbar-active {
    color: $white;

    &:hover {
      color: $white;
    }
  }

  .task-delayed {
    border-left-color: $orange;

    &:hover {
      border-color: $orange;
    }
  }
}
